<template>
  <div>
    <h2>基本信息</h2>
    <el-form label-position="top">
      <h3>发布用户信息</h3>
      <el-form-item label="发布用户名称">
        <span>
          {{ info.nickname }}
        </span>
      </el-form-item>
      <el-form-item label="用户ID">
        <span>{{ info.uid }}</span>
      </el-form-item>
      <h3>需求信息</h3>
      <el-form-item label="需求ID">
        <span>
          {{ info.id }}
        </span>
      </el-form-item>
      <el-form-item label="需求标题">
        <span>{{ info.title }}</span>
      </el-form-item>
      <el-form-item label="需求详情">
        <el-row :gutter="10">
          <el-col :span="24">
            <editor v-model="info.detail" style="height: 100%" :disabled="true"></editor>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="需求类型">
        <span>{{ info.categoryName }}</span>
      </el-form-item>
      <el-form-item label="需求地区限制">
        <span>
          {{ info.place }}
        </span>
      </el-form-item>
      <el-form-item label="需求状态">
        <span>{{ ['招募中', '停止招募', '已截止'][info.closed] }}</span>
      </el-form-item>
      <el-form-item label="需求报价">
        <span v-if="info.minPrice == 0 && info.maxPrice == 0">面议</span>
        <span v-if="info.minPrice != 0 && info.maxPrice == 0">￥{{ info.minPrice }}</span>
        <span v-if="info.minPrice != info.maxPrice && info.minPrice != 0 && info.maxPrice != 0">
          ￥{{ info.minPrice }}~￥{{ info.maxPrice }}
        </span>
        <span v-if="info.minPrice == info.maxPrice && info.minPrice != 0 && info.maxPrice != 0">
          ￥{{ info.minPrice }}
        </span>
      </el-form-item>
      <el-form-item label="发布时间">
        <span>{{ info.onlineAt }}</span>
      </el-form-item>
      <el-form-item label="需求完成时间">
        <span>{{ info.endAt }}</span>
      </el-form-item>

      <h2>需求审核</h2>
      <el-form-item label="审核设置">
        <el-radio-group class="set" v-model="info.checked">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">
            审核不通过
            <el-input
              v-model="info.reason"
              v-if="(showReason = true)"
              placeholder="填写审核不通过原因"
            ></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <edit-bar>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="$tabs.close()">取消</el-button>
      </edit-bar>
    </el-form>
  </div>
</template>
<script>
  import Editor from 'comp/Editor';
  import EditBar from 'comp/EditBar';
  import { mapGetters } from 'vuex';
  import EditMixins from 'mixins/Edit';
  export default {
    mixins: [EditMixins],
    data() {
      return {
        checked: 0,
        reason: '',
      };
    },
    components: {
      Editor,
      EditBar,
    },
    created() {},
    computed: {
      ...mapGetters(['$permission']),
    },
    methods: {
      getInfo() {
        if (!this.id || this.infoGetting) return;
        this.infoGetting = true;
        this.$service.TradeDetail({ id: this.id }).then((res) => {
          this.info = { ...res };
          this.info.place = this.info.province + this.info.city;
        });
      },
      pass() {
        this.$service
          .TradePass({ ids: this.id })
          .then((res) => {
            this.$message.success('审核通过');
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      noPass() {
        this.$service
          .TradeRefuse({
            ids: this.id,
            reason: this.info.reason,
          })
          .then((res) => {
            this.dialogShow = false;
            this.$message.success('操作成功');
          });
      },
      save() {
        if (this.info.checked == 1) {
          this.pass();
        }
        if (this.info.checked == 2) {
          if (this.info.reason == '') {
            this.$message.warning('请输入审核不通过原因');
            return;
          }
          this.noPass();
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-form-item__label {
    font-size: 16px;
    padding: 10px 5px !important;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    background: #ced6e2;
    color: #222;
    width: 100%;
    line-height: 24px;
  }
  .edit-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 210px;
    background: white;
    padding: 20px;
    border-top: 1px solid #ccc;
    z-index: 11;

    /deep/ .el-button {
      margin-left: 10px;
    }
  }
  .set {
    margin-bottom: 50px;
  }
</style>
